<template>
  <div>
    <HelloWorld
      :listTab="listTab.list"
      @hanClick="hanClick"
      :numIndex="numIndex"
    ></HelloWorld>
  </div>
  <component :is="isComponent" :list="list"> </component>
</template>
<script lang="ts" setup>
import { listGt } from "../utli/index";
import { reactive, ref, shallowRef } from "vue";
import HelloWorld from "../components/HelloWorld.vue";
import Gantt from "../components/pageIndex/Gantt.vue";
import Timing from "../components/pageIndex/Timing.vue";
import Flowchart from "../components/pageIndex/Flowchart.vue";

// Ts接口定义类
interface list {
  name: String;
  id: String | Number;
}

// 数据初始化
let listTab = reactive({
  list: [
    {
      name: "甘特图",
      id: 0,
    },
    {
      name: "时序图",
      id: 1,
    },
    {
      name: "流程图",
      id: 2,
    },
  ] as list[],
});

let list = listGt;
let numIndex = ref(0 as number);
// 没采用ref会导致没必要的性能消耗
let isComponent: any = shallowRef(Gantt);
//数据操作部分
function hanClick(d: any, index: number) {
  numIndex.value = index;
  switch (d.id) {
    case 0:
      isComponent.value = Gantt;
      break;
    case 1:
      isComponent.value = Timing;
      break;
    case 2:
      isComponent.value = Flowchart;
      break;
  }
}
</script>
<style scoped></style>
